<template>
<div id="out31">
    <div id="top2">
    	        <a href="#/GeRenzx3">
			<img id="imgTop1" src="../assets/img/duanhuowang/zuojiantou.png" alt=""/>
			</a>
			<span>我的账户</span>
	</div>
	<div class="back"></div>
	<img src="../assets/img/gerenzhongxin/1gerenzhongxin/zhuanshi.png" alt=""/>
	<p class="priceee">￥2000</p>
	<p class="myjin">我的金额</p>
	<div class="tixian">提现</div>
	<div class="backTi">
		<div class="tixiann">
			<p class="tittll">选择提现方式</p>
			<div><span class="activeTi"></span>提现到微信</div>
			<p class="text">(提现到微信，手续费0.29，让我开车10%服务费2-3个工作日地址。)</p>
			<div><span></span>提现到支付宝</div>
			<p class="text">(提现到支付宝，手续费0.29，让我开车10%服务费2-3个工作日地址。)</p>
			<span>提现</span>
			<span>取消</span>
		</div>
	</div>
</div>
</template>

<script>
	export default {
		name: '',
		methods: {
			round2: function() {
			    $("#out31>.backTi>.tixiann>div>span").click(function(){
			    	    $(this).addClass("activeTi").parent().siblings("div").find("span").removeClass("activeTi");
			    });
			    $("#out31>.backTi>.tixiann>span").eq(1).click(function(){
			    	    $(this).parent().parent().slideUp(500);
			    });
			    $("#out31>.tixian").click(function(){
			    	    $("#out31>.backTi").slideDown(500);
			    });
			},
		},
		mounted: function() {
			//只有在mounted之后，才可以执行dom操作，也就是说可以在这个方法里面执行那些需要加载立即执行的方法
			this.round2();
		},
	}
</script>

<style>
	#out31 a{
		color: #000000;
		text-decoration: none;
	}
	#out31{
		background: #f2f2f2;
		height: 100vh;
		overflow: scroll;
	}
	#out31>.back{
		height: 9.6rem;
	}
	#out31>#top2 {
		width: 100vw;
		height: 9.6rem;
		background: #e53e42;
		color: white;
		display: flex;
		align-items: center;
		text-align: center;
		justify-content: space-around;
		position: fixed;
		z-index: 10;
		padding-left: 3rem;
		box-sizing: border-box;
	}
	#out31 #imgTop1 {
		width: 2.3rem;
		height: 3.8rem;
	}
	
	#out31 #top2>span {
		width: 60rem;
		height: 3.6rem;
		font-family: MicrosoftYaHei;
		font-size: 3.6rem;
		font-weight: normal;
		font-stretch: normal;
		line-height: 3.6rem;
		letter-spacing: 0px;
		text-align: right;
		box-sizing: border-box;
		text-align: center;
		padding-right: 9rem;
	}
	#out31>img{
		width: 20rem;
		height: 15rem;
		margin-left: 26rem;
		margin-top: 5rem;
	}
	#out31>.priceee,#out31>.myjin{
		font-size: 3rem;
		text-align: center;
		color: #4d4d4d;
		margin-top: 2rem;
	}
	#out31>.priceee{
		color: #e53e42;
		margin-top: 5rem;
	}
	#out31>.tixian{
		width: 48rem;
		height: 7.2rem;
		background-color: #61a7ea;
		border-radius: 0.2rem;
		font-size: 2.8rem;
		color: #FFFFFF;
		text-align: center;
		line-height: 7.2rem;
		margin-top: 8rem;
		margin-left: 12rem;
	}
	#out31>.backTi{
		height: 100vh;
		width: 100vw;
		background: rgba(0,0,0,.5);
		position: fixed;
		top: 0;
		z-index: 50;
		display: none;
	}
	#out31>.backTi>.tixiann{
		position: absolute;
		bottom: 0;
		width: 100vw;
		background: #FFFFFF;
	}
	#out31>.backTi>.tixiann>.tittll{
		height: 8rem;
		background-color: #e53e42;
		font-size: 3rem;
		color: #FFFFFF;
		text-align: center;
		line-height: 8rem;
	}
	#out31>.backTi>.tixiann>div{
		display: flex;
		align-items: center;
		justify-content: flex-start;
		color: #4d4d4d;
		font-size: 3rem;
		padding-left: 2rem;
		box-sizing: border-box;
		padding-top: 3rem;
	}
	#out31>.backTi>.tixiann>div>span{
		width: 3rem;
		height: 3rem;
		border: 0.1rem solid #CCCCCC;
		border-radius: 50%;
		margin-right: 2rem;
	}
	#out31>.backTi>.tixiann>div>span.activeTi{
		background: url(../assets/img/fenlei/dui.png) no-repeat;
		background-size: 100% 100%;
	}
	#out31>.backTi>.tixiann>.text{
		width: 58.8rem;
		height: 6.1rem;
		padding-left: 6rem;
		font-family: MicrosoftYaHei;
		font-size: 2.4rem;
		line-height: 3.6rem;
		letter-spacing: 0px;
		color: #4d4d4d;
	}
	#out31>.backTi>.tixiann>span{
		display: block;
		width: 48rem;
		height: 7.2rem;
		background-color: #FFFFFF;
		border-radius: 0.2rem;
		margin-left: 12rem;
		border: 0.1rem solid #CCCCCC;
		text-align: center;
		line-height: 7.2rem;
		font-size: 2.8rem;
		color: #4d4d4d;
	}
	#out31>.backTi>.tixiann>span:first-of-type{
		background-color: #61a7ea;
		color: #FFFFFF;
		margin-top: 7rem;
	}
</style>